<template>
  <div>
    <div class="item">
      <div style="margin-right: 16px">
        <img class="item__img" :src="item.imgUrl" alt="" />
      </div>
      <div style="flex: 1" class="item__right">
        <span class="item__title">{{ item.name }}</span>
        <div>
          <span class="item__desc1">月售{{ item.sales }}</span>
        </div>
        <span class="item__price">¥{{ item.price }} </span>
        <span class="item__oldPrice">¥{{ item.oldPrice }}</span>
        <div class="item__plusBox">
          <span @click="changeCartItemInfo(shopId,item._id,item,1)" class="iconfont item__icon">&#xe667;</span>
          <span style="flex: 1; text-align: center">
            {{ cartList?.[shopId]?.[item._id]?.count || 0 }}
          </span>
          <span @click="changeCartItemInfo(shopId,item._id,item,-1)" style="margin-top: 1px" class="iconfont item__icon">&#xe66d;</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { reactive, toRefs } from "vue";
import { useRoute } from "vue-router";

const useCartEffect = () => {
  const store = useStore();
  const { cartList } = toRefs(store.state);
  const changeCartItemInfo = (shopId, productId, productInfo,num) => {
    // 同步的修改store里的内容
    store.commit('changeCartItemInfo', {shopId,productId,productInfo,num})
  }
  return { cartList, changeCartItemInfo };
};



export default {
  props: ["item"],
  setup() {
    const route = useRoute();
    const shopId = route.params.id;
    const {cartList, changeCartItemInfo} = useCartEffect();

    return { shopId, cartList, changeCartItemInfo };
  },
};
</script>
<style lang="scss" scoped>
.item {
  margin-top: 10px;
  display: flex;
  img {
    width: 56px;
    height: 56px;
  }
  &__plusBox {
    width: 60px;
    float: right;
    margin-right: 10px;
    display: flex;
  }
  &__right {
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 12px;
  }
  &__title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    line-height: 22px;
  }
  &__desc1 {
    font-size: 13px;
    color: #333;
    line-height: 18px;
    margin-right: 16px;
  }
  &__price {
    color: #e93b3b;
  }
  &__oldPrice {
    color: #999;
    font-size: 10px;
    text-decoration: line-through;
  }
  &__icon {
    color: #0091ff;
    font-size: 19px;
    flex: 1;
  }
  &__discountinfo {
    color: #e93b3b;
    font-size: 13px;
    line-height: 18px;
  }
}
</style>
